import React from 'react';
import classnames from 'classnames';
import {
  Form,
  Select,
} from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';

import styles from './index.module.less';

const { Option } = Select;

const SelectCom = ({
  label,
  name,
  rules,
  shouldUpdate,
  initialValue,
  defaultValue,
  search,
  className,
  style,
  optionData,
  onChange,
  getValueFromEvent,
  placeholder,
  ...props
}) => (
  <div className={classnames(styles.root, className)} style={style}>
    <div style={{ marginRight: '12px', whiteSpace: 'nowrap' }}>
      {label}
    </div>
    <Form.Item
      name={name}
      rules={rules}
      initialValue={initialValue}
      getValueFromEvent={getValueFromEvent}
      shouldUpdate={shouldUpdate}
    >
      <Select
        onChange={onChange}
        defaultValue={defaultValue}
        suffix={search && <CaretDownOutlined style={{ color: '#99ACC5' }} />}
        style={{ flex: 1 }}
        placeholder={placeholder}
        {...props}
      >
        {optionData && optionData.map(item => (
          <Option
            value={item.id}
            key={item.name}
          >
            {item.name}
          </Option>
        ))}
      </Select>
    </Form.Item>
  </div>
);

export default SelectCom;
